<template>
  <transition name="fade">
    <div v-if="flag">
      <!-- 遮罩层 -->
      <div class="lse_alert_mask" @click="close"></div>
      <!-- 内容 -->
      <div class="lse_alert_body">
          <div :style="{textAlign: titleCenter ? 'center' : 'left'}" style="padding:10px">
              <b>{{title}}</b>
          </div>
          <div style="font-size:14px;padding:10px" :style="msgStyle">
            {{msg}}
          </div>
          <div style="padding:10px;text-align:right">
              <el-button size="mini" @click="cancelx">{{cancelText}}</el-button>
              <el-button size="mini" @click="confirmx" type="primary">{{confirmText}}</el-button>
          </div>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  name: 'alert',
  data () {
    return {
      flag: false,
      msg: '',
      title: '提示',
      titleCenter: false,
      msgStyle: Object,
      confirm: {
        type: Function,
        default: function () {
          this.close()
        }
      },
      cancel: Function,
      cancelText: '取消',
      confirmText: '确认'
    }
  },
  methods: {
    close () {
      this.flag = false
    },
    cancelx () {
      if (this.cancel) {
        this.cancel()
      }
      this.close()
    },
    confirmx () {
      if (this.confirm) {
        this.confirm()
      }
      this.close()
    }

  },
  created () {}
}
</script>

<style scoped>

.lse_alert_mask{
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background:rgba(0, 0, 0, 0.5);
    z-index: 99999;
}
.lse_alert_body{
    width: 35%;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    overflow: auto;
    background: white;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
    z-index: 100000;
    border-radius: 5px;
    padding: 10px;
}
@media screen and (max-width: 768px) {
    .lse_alert_body{
        width: 60%;
    }
}

</style>
